<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
				<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="myApp">
			<table>
					<thead>
						<th>编号</th>
						<th>姓名</th>
						<th>性别</th>
					</thead>
					<tbody>
						<tr v-for="(x,index) in list">
							<td>{{index+1}}</td>
							<td>{{x.name}}</td>
							<td>
								<span v-if="x.sex==1">男</span>
								<span v-else-if="x.sex==0">女</span>
								<span v-else>人妖</span>
							</td>
						</tr>
					</tbody>
			</table>
		</div>
	</body>
	<script>
	     new Vue({
			  el:'#myApp',
			  data:{
				  list:[
					  {"name":"张三","sex":1},
					  {"name":"李四","sex":0},
					  {"name":"王五","sex":2}
				  ]
			  }
		 })
	</script>
</html>

